<template>
	<view class="pay-outer-wrapper">
		<!-- 返回首页 -->
		<!-- <uni-bankhome /> -->
		<div class="info-wrapper">
			<div class="name">付款给{{userinfo.name||''}}</div>
			<image class="photo" :src="userinfo.photo"></image>
		</div>
		<div class="input-wrapper">
			<div class="title">金额</div>
			<div class="input">
				<div class="icon"></div>
				<div class="price">
					<span>{{price}}</span>
					<span class="line"></span>
				</div>
			</div>
			<div class="input-rmb">
				<div class="icon ">¥</div>
				<div class="price">
					<span>{{priceRMB}}</span>
				</div>
			</div>
		</div>
		<div class="jsq-wrapper">
			<div class="flex">
				<div class="box one">
					<div class="inner" @click="operate(1)">1</div>
				</div>
				<div class="box two">
					<div class="inner" @click="operate(2)">2</div>
				</div>
				<div class="box three">
					<div class="inner" @click="operate(3)">3</div>
				</div>
				<div class="box del">
					<div class="inner" @click="operate('del')">删除</div>
				</div>
			</div>
			<div class="flex">
				<div class="flex-75">
					<div class="flex">
						<div class="box four">
							<div class="inner" @click="operate(4)">4</div>
						</div>
						<div class="box five">
							<div class="inner" @click="operate(5)">5</div>
						</div>
						<div class="box six">
							<div class="inner" @click="operate(6)">6</div>
						</div>
					</div>
					<div class="flex">
						<div class="box seven">
							<div class="inner" @click="operate(7)">7</div>
						</div>
						<div class="box eight">
							<div class="inner" @click="operate(8)">8</div>
						</div>
						<div class="box nine">
							<div class="inner" @click="operate(9)">9</div>
						</div>
					</div>
					<div class="flex">
						<div class="box zero">
							<div class="inner" @click="operate(0)">0</div>
						</div>
						<div class="box dian">
							<div class="inner" @click="operate('.')">.</div>
						</div>
					</div>
				</div>
				<div class="box pay">
					<!-- <div class="inner" @click="operate('pay')">付款</div> -->
					<button :disabled="disabled" class="inner" @click="operate('pay')">付款</button>
				</div>
			</div>
		</div>
		<pay-methods :disabled.sync="disabled" origin="order" :sn="sn" :type="type" :rechargeType="46" client="NATIVE"
			ref="payMethods"></pay-methods>
	</view>
</template>

<script>
	import {
		CreateOfflineTrade
	} from "@/api/business.js"
	import BigNumber from 'bignumber.js'
	import storage from "@/utils/storage.js";
	import payMethods from "@/components/pay-methods/pay-methods.vue"
	export default {
		components: {
			payMethods
		},
		data() {
			return {
				sn: "", // 订单号
				type: "", // 订单类型
				owner: "RECHARGE",
				price: '',
				priceRMB: 0,
				userinfo: {},
				rate: '',
				disabled: false
			}
		},
		watch: {
			price(val) {
				if (val > 0) {
					val = new BigNumber(val)
					this.priceRMB = val.multipliedBy(this.rate).dp(2, BigNumber.ROUND_DOWN)
				} else {
					this.priceRMB = 0;
				}
			},
		},
		onLoad(options) {
			this.userinfo = options
			this.initHL()
		},
		methods: {
			initHL() {
				let rate = storage.getVipRate();
				this.vipRate = rate
				this.userInfo = this.$options.filters.isLogin();
				if (this.userInfo.gradeName && rate[this.userInfo.gradeName].rate) {
					this.rate = rate[this.userInfo.gradeName].rate
				} else {
					this.rate = rate['0'].rate
				}
			},
			/**
			 * 输入密码后支付
			 * */

			CreateOfflineOrder() {
				let that = this
				this.disabled = true
				CreateOfflineTrade({
					way: "OFFLINE",
					client: "WECHAT_MP",
					owner: this.owner,
					storeId: this.userinfo.id,
					price: this.price
				}).then((resinfo) => {
					// 支付编号
					let sn = resinfo.data.result.sn;
					// 交易类型【交易号|订单号】
					let orderType = 'TRADE';
					this.sn = sn
					this.type = orderType
					setTimeout(() => {
						this.$refs.payMethods.showMethodPopup()
					}, 20)
				})
				return
			},
			operate(param) {
				let that = this
				if (param == 'pay') {
					if (this.disabled) return
					this.CreateOfflineOrder()
				}
				if (param == 'del') {
					if (this.price.length > 0) {
						this.price = this.price.slice(0, this.price.length - 1)
					}
					return
				}
				let price = this.price + param + ''
				if ((/^([1-9]\d{0,9}|0)([.]?|(\.\d{1,2})?)$/.test(price)) == true) {
					this.price = price
				} else {
					return
				}
			}
		}
	}
</script>

<style lang="scss">
	.pay-outer-wrapper {
		height: 100vh;
		display: flex;
		flex-direction: column;

		.info-wrapper {
			flex: 0 0 64upx+88upx+32upx;
			padding: 32upx 64upx 64upx;
			height: 64upx+88upx+32upx;
			line-height: 88upx;
			background-color: #efefef;
			display: flex;
			justify-content: space-between;
			overflow: hidden;

			.name {
				font-weight: bold;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.photo {
				width: 88upx;
				height: 88upx;
			}
		}

		.input-wrapper {
			flex: 1;
			padding: 32upx;
			background-color: #fff;
			margin-top: -32upx;
			border-radius: 32upx;

			.title {
				height: 64upx;
				line-height: 64upx;
			}

			.input {
				display: flex;
				height: 120upx;
				line-height: 120upx;
				font-size: 64upx;
				border-bottom: 2upx solid #f1f1f1;

				.icon {
					margin-right: 24upx;
					font-weight: bold;
				}

				.price {
					display: flex;
					align-items: center;

					.line {
						height: 64upx;
						width: 4upx;
						background-color: $main-color;
						animation: myAnimation 1s infinite
					}
				}
			}

			.input-rmb {
				display: flex;
				height: 120upx;
				line-height: 120upx;
				font-size: 32upx;

				.icon {
					margin-right: 24upx;
					font-weight: bold;
				}

				.price {
					display: flex;
					align-items: center;

					.line {
						height: 64upx;
						width: 4upx;
						background-color: $main-color;
						animation: myAnimation 1s infinite
					}
				}
			}

			.yue {
				margin-top: 24upx;
			}

		}

		.jsq-wrapper {

			padding: 16upx;
			background-color: #efefef;

			.flex {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}

			.flex-75 {
				flex: 0 0 75%;
			}

			.box {
				padding: 8upx;
				flex: 1;
				height: 100upx;

				box-sizing: border-box;

				.inner {
					background-color: #fff;
					border-radius: 8upx;
					height: 100%;
					display: flex;
					justify-content: space-around;
					align-items: center;
				}
			}

			.pay {
				height: 300upx;

				.inner {
					background-color: $main-color;
					color: #ffffff;
				}
			}

			.zero {
				flex: 0 0 67%;
			}
		}
	}

	@keyframes myAnimation {
		30% {
			opacity: 1
		}

		32% {
			opacity: 0
		}

		70% {
			opacity: 0
		}

		72% {
			opacity: 1
		}
	}
</style>
